<template>
  <div class="notification-list">
    <el-scrollbar max-height="400px">
      <div v-if="loading" class="loading-wrapper">
        <el-icon class="is-loading" :size="20"><Loading /></el-icon>
        <span>加载中...</span>
      </div>

      <template v-else>
        <div
          v-for="item in data"
          :key="item.id"
          class="notification-item"
          :class="{
            'is-unread': !item.is_read,
            'is-urgent': item.priority === 'urgent',
          }"
          @click="handleClick(item)"
        >
          <div class="avatar-wrapper">
            <el-avatar :src="item.avatar" :size="36" />
            <el-tag
              v-if="!item.is_read"
              class="unread-badge"
              type="danger"
              size="small"
              effect="dark"
            >
              new
            </el-tag>
          </div>

          <div class="content-wrapper">
            <div class="header">
              <span class="title">{{ item.title }}</span>
              <el-tag
                v-if="item.type"
                :type="getTagType(item.type)"
                size="small"
                effect="plain"
              >
                {{ getTypeText(item.type) }}
              </el-tag>
            </div>
            <div class="content">{{ item.content }}</div>
            <div class="footer">
              <span class="time">{{ formatTime(item.created_at) }}</span>
              <el-button
                v-if="!item.is_read"
                link
                type="primary"
                size="small"
                @click.stop="emitRead(item.id)"
              >
                标记已读
              </el-button>
            </div>
          </div>
        </div>

        <div v-if="data.length === 0" class="empty-wrapper">
          <el-empty description="暂无消息" :image-size="80" />
        </div>
      </template>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { Loading } from "@element-plus/icons-vue";
import { formatTime } from "@/utils/index";

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["read"]);

const getTagType = (type) => {
  const typeMap = {
    system: "",
    message: "success",
    warning: "warning",
    error: "danger",
  };
  return typeMap[type] || "";
};

const getTypeText = (type) => {
  const textMap = {
    system: "系统",
    message: "消息",
    warning: "警告",
    error: "错误",
  };
  return textMap[type] || type;
};

const emitRead = (id) => {
  emit("read", id);
};

const handleClick = (item) => {
  if (!item.is_read) {
    emitRead(item.id);
  }
  if (item.link) {
    window.open(item.link, item.open_in_new_tab ? "_blank" : "_self");
  }
};
</script>

<style lang="scss" scoped>
.notification-list {
  --unread-bg: #f6faff;
  --urgent-bg: #fff6f6;

  .loading-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: var(--el-color-info);

    .el-icon {
      margin-bottom: 10px;
      animation: rotating 2s linear infinite;
    }
  }

  .notification-item {
    display: flex;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 1px solid var(--el-border-color-light);

    &:hover {
      background-color: var(--el-fill-color-light);
    }

    &.is-unread {
      background-color: var(--unread-bg);

      &:hover {
        background-color: color-mix(
          in srgb,
          var(--unread-bg) 80%,
          var(--el-fill-color-light)
        );
      }
    }

    &.is-urgent {
      background-color: var(--urgent-bg);

      &:hover {
        background-color: color-mix(
          in srgb,
          var(--urgent-bg) 80%,
          var(--el-fill-color-light)
        );
      }

      .title {
        color: var(--el-color-danger);
        font-weight: bold;
      }
    }

    .avatar-wrapper {
      position: relative;
      margin-right: 12px;
      flex-shrink: 0;

      .unread-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        transform: scale(0.8);
      }
    }

    .content-wrapper {
      flex: 1;
      min-width: 0;

      .header {
        display: flex;
        align-items: center;
        margin-bottom: 4px;

        .title {
          font-size: 14px;
          font-weight: 500;
          margin-right: 8px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .el-tag {
          flex-shrink: 0;
        }
      }

      .content {
        font-size: 13px;
        color: var(--el-text-color-secondary);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 4px;
      }

      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .time {
          font-size: 12px;
          color: var(--el-text-color-placeholder);
        }
      }
    }
  }

  .empty-wrapper {
    padding: 20px 0;

    :deep(.el-empty__description) {
      margin-top: 8px;
    }
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
